<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page isELIgnored="false" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/login.css">
    <script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
    <script src="js/bootstrap.min.js" charset="UTF-8"></script>
    <script src="js/jquery.form.js" charset="UTF-8"></script>
    <script src="js/global.js" charset="UTF-8"></script>
    <script src="js/login.js" charset="UTF-8"></script>
    <title>U袋网 - 登录 / 注册</title>
</head>
<body>
<div class="public-head-layout container">
    <a class="logo" href="index.jsp"><img src="images/icons/logo.jpg" alt="U袋网" class="cover"></a>
</div>
<div style="background:url(images/login_bg.jpg) no-repeat center center; ">
    <div class="login-layout container">
        <div class="form-box login">
            <div class="tabs-nav">
                <h2>欢迎登录U袋网平台</h2>
            </div>
            <div class="tabs_container">
                <form class="tabs_form" action="RequestServlet?action=loginAction" method="post" id="login_form">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
                            </div>
                            <input class="form-control phone" name="phone" id="login_phone" required placeholder="手机号"
                                   maxlength="11" autocomplete="off" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                            </div>
                            <input class="form-control password" name="password" id="login_pwd" placeholder="请输入密码"
                                   autocomplete="off" type="password">
                            <div class="input-group-addon pwd-toggle" title="显示密码"><span
                                    class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
                        </div>
                    </div>
                    <div class="checkbox">

                        <a href="javascript:;" class="pull-right" id="resetpwd">忘记密码？</a>
                    </div>
                    <!-- 错误信息 -->
                    <div class="form-group">
                        <div class="error_msg" id="login_error">

                        </div>
                    </div>
                    <button class="btn btn-large btn-primary btn-lg btn-block submit" id="login_submit" type="button"
                            onclick="login(this)">
                        登录
                    </button>
                    <br>
                    <p class="text-center">没有账号？<a href="javascript:;" id="register">免费注册</a></p>
                </form>
                <div class="tabs_div" id="loginshow">
                    <div class="success-box">
                        <div class="success-msg">
                            <i class="success-icon"></i>
                            <p class="success-text">登录成功</p>
                        </div>
                    </div>
                    <div class="option-box">
                        <div class="buts-title">
                            现在您可以
                        </div>
                        <div class="buts-box">
                            <a role="button" href="index.jsp" class="btn btn-block btn-lg btn-default">继续访问商城</a>
                            <a role="button" href="udai_welcome.jsp" class="btn btn-block btn-lg btn-info">登录会员中心</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-box register">
            <div class="tabs-nav">
                <h2>欢迎注册<a href="javascript:;" class="pull-right fz16" id="reglogin">返回登录</a></h2>
            </div>
            <div class="tabs_container">
                <form class="tabs_form" action="RequestServlet?action=registerAction" method="post" id="register_form">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
                            </div>
                            <input class="form-control phone" name="phone" id="register_phone" required
                                   placeholder="手机号" maxlength="11" autocomplete="off" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <input class="form-control" name="smscode" id="register_sms" placeholder="输入验证码"
                                   type="text">
                            <span class="input-group-btn">
									<button class="btn btn-primary getsms" type="button">发送短信验证码</button>
								</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                            </div>
                            <input class="form-control password" name="password" id="register_pwd" placeholder="请输入密码"
                                   autocomplete="off" type="password">
                            <div class="input-group-addon pwd-toggle" title="显示密码"><span
                                    class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
                        </div>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input checked="" id="register_checkbox" type="checkbox"><i></i> 同意<a
                                href="temp_article/udai_article3.jsp">U袋网用户协议</a>
                        </label>
                    </div>
                    <!-- 错误信息 -->
                    <div class="form-group">
                        <div class="error_msg" id="register_error"></div>
                    </div>
                    <button class="btn btn-large btn-primary btn-lg btn-block submit" id="register_submit"
                            type="button" onclick="zhuce(this)">注册
                    </button>
                </form>
                <div class="tabs_div" id="zccg">
                    <div class="success-box">
                        <div class="success-msg">
                            <i class="success-icon"></i>
                            <p class="success-text">注册成功</p>
                        </div>
                    </div>
                    <div class="option-box">
                        <div class="buts-title">
                            现在您可以
                        </div>
                        <div class="buts-box">
                            <a role="button" href="index.jsp" class="btn btn-block btn-lg btn-default">继续访问商城</a>
                            <a role="button" href="udai_welcome.jsp" class="btn btn-block btn-lg btn-info">登录会员中心</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-box resetpwd">
            <div class="tabs-nav clearfix">
                <h2>找回密码<a href="javascript:;" class="pull-right fz16" id="pwdlogin">返回登录</a></h2>
            </div>
            <div class="tabs_container">
                <form class="tabs_form" action="RequestServlet?action=updateAction" method="post"
                      id="resetpwd_form">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
                            </div>
                            <input class="form-control phone" name="phone" id="resetpwd_phone" required
                                   placeholder="手机号" maxlength="11" autocomplete="off" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <input class="form-control" name="sms" id="pwdssss" placeholder="输入验证码" type="text">
                            <span class="input-group-btn">
									<button class="btn btn-primary getsms" type="button">发送短信验证码</button>
								</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                            </div>
                            <input class="form-control password" name="password" id="resetpwd_pwd" placeholder="新的密码"
                                   autocomplete="off" type="password">
                            <div class="input-group-addon pwd-toggle" title="显示密码"><span
                                    class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
                        </div>
                    </div>
                    <!-- 错误信息 -->
                    <div class="form-group">
                        <div class="error_msg" id="resetpwd_error"></div>
                    </div>
                    <button class="btn btn-large btn-primary btn-lg btn-block submit" id="resetpwd_submit"
                            type="button" onclick="update(this)">重置密码
                    </button>
                </form>
                <div class="tabs_div" id="xgcg">
                    <div class="success-box">
                        <div class="success-msg">
                            <i class="success-icon"></i>
                            <p class="success-text">密码重置成功</p>
                        </div>
                    </div>
                    <div class="option-box">
                        <div class="buts-title">
                            现在您可以
                        </div>
                        <div class="buts-box">
                            <a role="button" href="index.jsp" class="btn btn-block btn-lg btn-default">继续访问商城</a>
                            <a role="button" href="login.jsp" class="btn btn-block btn-lg btn-info">返回登陆</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            var submitType = '';
            var phone = 0;
            var password = 0;
            var phoneyz = 1;
            $(document).ready(function () {
                //登陆 错误界面显示
                var loginerr = '${requestScope.loginerr}';
                if (loginerr.length > 0) {
                    $("#login_error").append(" <div class=\"alert alert-warning alert-dismissible fade in\" role=\"alert\">\n" +
                        "                                <strong>密码错误</strong> 请重新输入密码\n" +
                        "                            </div>");
                }
                //登陆成功显示页面
                var loginyz = '${requestScope.login}';
                if (loginyz.length > 0) {
                    $("#login_form").hide();
                    $("#loginshow").show();
                }

                //注册失败显示页面
                var zc = '${requestScope.lgqr}';
                if (zc.length > 0) {
                    $('.login').hide();
                    $('.register').show();
                    $("#register_error").append("<div class=\"alert alert-warning alert-dismissible fade in\" role=\"alert\"><strong>注册失败,</strong> " + zc + "</div>");
                }
                //注册成功页面显示
                var zccg = '${requestScope.lgzccg}';
                if (zccg.length > 0) {

                    $("#login_form").hide();
                    $('.login').hide();
                    $('.register').show();
                    $("#register_form").hide();
                    $("#zccg").show();
                }

                //修改密码失败
                var xg = '${requestScope.update}';
                if (xg.length > 0) {
                    $('.login').hide();
                    $('.resetpwd').show();
                    $("#resetpwd_error").append("<div class=\"alert alert-warning alert-dismissible fade in\" role=\"alert\"><strong>修改密码失败,</strong> " + zc + "</div>");
                }
                //修改成功
                var xgcg = '${requestScope.updatecg}';
                if (xgcg.length > 0) {
                    $("#login_form").hide();
                    $('.login').hide();
                    $('.resetpwd').show();
                    $("#resetpwd_form").hide();
                    $("#xgcg").show();
                }
                // 判断直接进入哪个页面 例如 login.php?p=register
                switch ($.getUrlParam('p')) {
                    case 'register':
                        $('.register').show();
                        break;
                    case 'resetpwd':
                        $('.resetpwd').show();
                        break;
                    default:
                        $('.login').show();
                }
                ;

                // 发送验证码事件
                $('.getsms').click(function () {
                    var phone = $(this).parents('form').find('input.phone');
                    var error = $(this).parents('form').find('.error_msg');
                    switch (phone.validatemobile()) {
                        case 0:
                            // 短信验证码的php请求
                            var a = $("#resetpwd_phone").val();
                            $.ajax({
                                "url": "PhoneServlet",                      // 要提交的URL路径
                                "type": "post",                     // 发送请求的方式
                                "data": "phone=" + a,                      // 要发送到服务器的数据
                                "dataType": "json",                   // 指定传输的数据格式
                                "success": function (result) {
                                }
                            });
                            error.html(msgtemp('验证码 <strong>已发送</strong>', 'alert-success'));
                            $(this).rewire(60);
                            break;
                        case 1:
                            error.html(msgtemp('<strong>手机号码为空</strong> 请输入手机号码', 'alert-warning'));

                            break;
                        case 2:
                            error.html(msgtemp('<strong>手机号码错误</strong> 请输入11位数的号码', 'alert-warning'));
                            break;
                        case 3:
                            error.html(msgtemp('<strong>手机号码错误</strong> 请输入正确的号码', 'alert-warning'));
                            break;
                    }
                });

                // 以下确定按钮仅供参考
                $('.submit').click(function () {
                    var form = $(this).parents('form')
                    var phone = form.find('input.phone');
                    var pwd = form.find('input.password');
                    var error = form.find('.error_msg');
                    var success = form.siblings('.tabs_div');
                    var options = {
                        beforeSubmit: function () {
                            console.log('喵喵喵')
                        },
                        success: function (data) {
                            console.log(data)
                        }
                    }
                    // 验证手机号参考这个

                    switch (phone.validatemobile()) {
                        case 1:
                            error.html(msgtemp('<strong>手机号码为空</strong> 请输入手机号码', 'alert-warning'));
                            phone = 1;
                            break;

                        case 2:
                            error.html(msgtemp('<strong>手机号码错误</strong> 请输入11位数的号码', 'alert-warning'));
                            phone = 1;
                            break;

                        case 3:
                            error.html(msgtemp('<strong>手机号码错误</strong> 请输入正确的号码', 'alert-warning'));
                            phone = 1;
                            break;
                        case 0:
                            phone = 0;
                            break;
                    }
                    // 验证密码复杂度参考这个
                    switch (pwd.validatepwd()) {
                        case 1:
                            error.html(msgtemp('<strong>密码不能为空</strong> 请输入密码', 'alert-warning'));
                            password = 1;
                            break;
                        case 2:
                            error.html(msgtemp('<strong>密码过短</strong> 请输入6位以上的密码', 'alert-warning'));
                            password = 2;
                            break;
                        case 3:
                            error.html(msgtemp('<strong>密码过于简单</strong><br>密码需为字母、数字或特殊字符组合', 'alert-warning'));
                            password = 3;
                            break;
                        case 0:
                            password = 0;
                            break;
                    }
                    if (submitType == 'login_submit') {
                        if (phone == 0 && password == 0) {
                            document.getElementById('login_form').submit();
                        }

                    } else if (submitType == 'register_submit') {
                        if (phone == 0 && password == 0) {
                            document.getElementById('register_form').submit();
                        }
                    } else if (submitType == 'resetpwd_submit') {
                        if (phone == 0 && password == 0) {
                            document.getElementById('resetpwd_form').submit();
                        }
                    }
                })
            });

            function login(element) {
                submitType = element.id;
            }

            function zhuce(element) {
                submitType = element.id;
            }

            function update(element) {
                submitType = element.id;
            }
        </script>
    </div>
</div>
<div class="footer-login container clearfix">
    <ul class="links">
        <a href="">
            <li>网店代销</li>
        </a>
        <a href="">
            <li>U袋学堂</li>
        </a>
        <a href="">
            <li>联系我们</li>
        </a>
        <a href="">
            <li>企业简介</li>
        </a>
        <a href="">
            <li>新手上路</li>
        </a>
    </ul>
    <!-- 版权 -->
    <p class="copyright">
        © 2005-2017 U袋网 版权所有，并保留所有权利<br>
        ICP备案证书号：闽ICP备16015525号-2&nbsp;&nbsp;&nbsp;&nbsp;福建省宁德市福鼎市南下村小区（锦昌阁）1栋1梯602室&nbsp;&nbsp;&nbsp;&nbsp;Tel:
        18650406668&nbsp;&nbsp;&nbsp;&nbsp;E-mail: 18650406668@qq.com
    </p>
</div>
</body>
</html>